<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Greet from "./components/Greet.vue";
import LeftMenu from "./components/LeftMenu.vue"
</script>

<template>
  <el-container >
    <el-aside width="140px" style="background-color: rgb(238, 241, 246)">
      <!-- 左侧栏内容 -->
      <div class="left-menu">
       <LeftMenu />
      </div>
    </el-aside>
    <el-container style="flex-direction: column;">
      <!-- 主内容区 -->
      <el-main style="background-color: rgb(255, 255, 255)">
        <!-- 主要内容 -->
        <div class="main-content">
          <Greet />
        </div>
        
      </el-main>
    </el-container>
  </el-container>
</template>
 
<style scoped>
.el-container {
  height: 100vh;
  display: flex;
}

.left-menu {
  flex: 1; /* 让左侧栏填满剩余空间 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-menu ul {
  list-style: none; /* 去除列表项的默认样式 */
  padding: 0; /* 去除列表项的内边距 */
}

.left-menu li {
  margin-bottom: 10px; /* 调整列表项之间的间距 */
  display: flex;
  align-items: center;
}

.left-menu i {
  margin-right: 10px; /* 调整图标与文本之间的距离 */
}
.left-menu li a {
  text-color: #000;
}
 
.main-content {
  flex: 1; /* 让主内容区域填满剩余空间 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* 将主内容区域的子元素从左右排列变为上下排列 */
}
</style>